<template>
  <div class="agent-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in props.agents" :key="index">
        <div class="item-wrap">
          <div class="content-wrap">
            <div
              style="display: flex; flex-direction: row; justify-content: end"
            >
              <div class="tag" v-if="false">官方授权代理商</div>
            </div>
            <div class="brand-name">
              {{ item.name }}
            </div>
            <div class="brand-desc">
              {{ item.desc }}
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                justify-content: center;
              "
            >
              <div class="btn" @click="apply(item)">申请开户</div>
            </div>
          </div>
          <div class="icon-wrap">
            <el-image
              :src="item.logo"
              style="
                width: 60px;
                height: 60px;
                border-radius: 10px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              "
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <googleApplyDialog v-model:value="googleVisible" v-if="googleVisible" />
    <bingApplyDialog v-model:value="bingVisible" v-if="bingVisible" />
    <meteApplyDialog v-model:value="metaVisible" v-if="metaVisible" />
    <titokApplyDialog v-model:value="titokVisible" v-if="titokVisible" />
  </div>
</template>

<script setup>
import bingApplyDialog from "./form/bing-apply-dialog.vue";
import googleApplyDialog from "./form/google-apply-dialog.vue";
import meteApplyDialog from "./form/meta-apply-dialog.vue";
import titokApplyDialog from "./form/titok-apply-dialog.vue";

const props = defineProps({
  agents: {
    type: Array,
    default: () => [],
  },
});
// const router = useRouter()

const googleVisible = ref(false);
const bingVisible = ref(false);
const metaVisible = ref(false);
const titokVisible = ref(false);

// const agents = [
//   {
//     name: "Google",
//     logo: "https://www.google.com/favicon.ico",
//     desc: "全球搜索引擎霸主，覆盖超200个国家和地区...",
//     tag: "官方授权代理商",
//     desc: "全球搜索引擎霸主，覆盖超200个国家和地区。通过搜索、展示、视频、应用广告等多种形式，精准触达全球潜在客户，是出海营销的基石。",
//   },
//   {
//     name: "Bing",
//     logo: "https://www.bing.com/sa/simg/bing_p_rr_teal_min.ico",
//     desc: "微软系搜索引擎广告，覆盖Bing、Yahoo等...",
//     tag: "官方授权代理商",
//     desc: "微软系搜索引擎广告，覆盖Bing、Yahoo等合作伙伴网络。专注于欧美高净值商务人群，CPC成本相对较低，是搜索广告的重要补充渠道。",
//   },
//   {
//     name: "Meta",
//     logo: "https://static.xx.fbcdn.net/rsrc.php/yo/r/iRmz9lCMBD2.ico",
//     desc: "全球最大社交广告生态，拥有Facebook、Instagram、WhatsApp...",
//     tag: "官方授权代理商",
//     desc: "全球最大社交广告生态，拥有Facebook、Instagram、WhatsApp等超级应用。凭借强大的用户画像和精准的兴趣定位，是进行品牌塑造和受众互动的首选平台。",
//   },
//   {
//     name: "TikTok",
//     logo: "https://www.tiktok.com/favicon.ico",
//     desc: "全球增长最快的短视频娱乐平台，深受年轻一代喜爱...",
//     tag: "官方授权代理商",
//     desc: "全球增长最快的短视频娱乐平台，深受年轻一代喜爱。以原生、沉浸式的短视频广告形式驱动品牌病毒式传播，是吸引Z世代和打造流行趋势的核心阵地。",
//   },
// ];
function apply(item) {
  // router.push("/accountMng/userOpenAccount")
  // router.push("/accountMng/metaApply")
  // router.push("/accountMng/googleApply")
  if (item.type === "Google") {
    googleVisible.value = true;
  }
  if (item.type === "Bing") {
    bingVisible.value = true;
  }
  if (item.type === "Meta") {
    metaVisible.value = true;
  }
  if (item.type === "TikTok") {
    titokVisible.value = true;
  }
}
</script>
<style scoped lang="scss">
.agent-container {
  padding: 20px;

  .item-wrap {
    position: relative;
    height: 280px;
    .icon-wrap {
      width: 68px;
      // height: 68px;
      // border-radius: 16px;
      margin-left: 20px;
      // background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      /* 阴影效果 */
      // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .content-wrap {
      background-color: #ecf8ff;
      border-radius: 10px;
      padding-bottom: 30px;
      z-index: 0;
      position: absolute;
      width: 100%;
      top: 30px;
      display: flex;
      flex-direction: column;
      .tag {
        background-color: #17bd9c;
        border-radius: 00px 10px 0px 10px;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        padding: 5px 10px;
      }
      .brand-name {
        color: #333;
        font-size: 14px;
        font-weight: 600;
        margin: 40px 0 0 20px;
      }
      .brand-desc {
        color: #333;
        font-size: 12px;
        height: 80px;
        margin: 20px;
      }
      .btn {
        background-color: #039691;
        width: 120px;
        align-items: center;
        display: flex;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        height: 38px;
        border-radius: 30px;
      }
    }
  }
}
</style>
